<template>
  <h3>{{ fristname }}</h3>
  <h3>{{ lastname }}</h3>
  <h3>{{ full }}</h3>
  <h3>{{ full2 }}</h3>
  <button @click="changefrist">改变frist</button>
  <button @click="changelast">改变last</button>
  <button @click="changefull">改变last</button>
  <button @click="changefull2">直接修改计算属性</button>
</template>

<script>
import { computed, reactive, ref } from "vue";
export default {
  setup(props) {
    const fristname = ref("kebo");
    const lastname = ref("yyds");
    const aginname = ref("单独修改计算属性");
    // 直接传入一个函数
    // const full = computed(() => fristname.value + " " + lastname.value);

    // 传入一个对象
    // 计算属性computed返回的是一个ref对象，需要修改  改属性时  需要通过.value来修改
    let full = computed({
      get: () => fristname.value + " " + lastname.value,
      set(newval) {
        fristname.value = newval.split("。")[0];
        lastname.value = newval.split("。")[1];
      },
    });

    const changefrist = () => {
      fristname.value = "xfy";
    };
    const changelast = () => {
      lastname.value = "hhh";
    };
    const changefull = () => {
      full.value = "哈哈哈。修改成功";
    };

    let full2 = computed({
      get: () => aginname.value,
      set(newval) {
        // full2.value = newval;
        // 不能直接修改   不然会一直陷入死循环
      },
    });

    const changefull2 = () => {
      full2.value = "我要直接修改";
      console.log(
        fristname.value,
        lastname.value,
        aginname.value,
        full.value,
        full2.value
      );
    };
    return {
      fristname,
      lastname,
      full,
      changefrist,
      changelast,
      changefull2,
      changefull,
      full2,
    };
  },
};
</script>

<style></style>
